<template>
	<view class="wrapper">
		<view class="header flex-between">
			<view>收藏夹：{{  listQuery.clipName}}</view>
			<view>帖子总数：{{ tableData.length }}</view>
		</view>
		<view class="content">
			<view class="list-item" v-for="(item, index) in tableData" :key="index" @click="joinPath(item)">
				<view class="title">{{ item.title }}</view>
				<view class="con flex-between">
					<view class="con-item-left">
							<view class="left flex-start">
								<image v-if="item.firstImg" :src="item.firstImg" class="img-item"></image>
								<view class="editorcontent overTextMultiple">{{ item.editContent || '暂无内容' }}</view>
							</view>
						<view class="flex-between">
							<view>{{ item.sendTime }}</view>
							<view class="flex-start dic-all">
								<span v-for="(keys, ind) in item.subjectTypeList">{{ keys }}</span>
							</view>
						</view>
					</view>
					<view class="del-all-icon">
						<image src="/static/img/ic_del.png" class="del-icon" @click.stop="delShow(item)"></image>
					</view>
				</view>
			</view>
		</view>
		<u-modal v-model="delshow" content="是否将该帖子从收藏夹移出" :show-cancel-button="true" @confirm="confirmDelShow"></u-modal>
	</view>
</template>

<script>
	import apis from '@/apis.js'
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				show: false,
				delshow: false,
				labelValue: '全部专业',
				listQuery: {
					clipId: '',
					pageNo: 1,
					pageSize: 10
				},
				tableData: [],
				imgUrl: '<p>包含视频</p><video class="ql-video" controls="controls" type="video/mp4" src="https://qitianapp.fornewtech.com/api/temp/1_1636859463684.mp4"></video><p><br></p>',
				delQuery: {
						artId: '',
						clipId: '',
						clipName: '',
						contextId: '',
				}
				
			}
		},
		onLoad(options) {
			this.listQuery.clipId = options.id
			this.listQuery.clipName = options.clipName
			this.getList()
		},
		computed: {
			...mapState(['img_url']),
		},
		methods: {
			getList() {
				this.$http.get(apis.collectionPage, this.listQuery).then(res => {
					if(res.data.code === 200) {
						this.tableData = this.tableData.concat(res.data.result.records)
						this.tableData.forEach(item => {
							item.subjectTypeList = item.subjectType_dictText.split(',')
						})
					}
				})
			},
			joinPath(val) {
				if(val.editContent) {
					uni.navigateTo({
						url: '/pages/tabbar/tabbar-1/post-detail?id=' + val.artId
					})
				} else {
					uni.showToast({
						title: '该帖子已被删除',
						icon: 'none'
					})
				}
				
			},
			confirm(e) {
				this.labelValue = e[0].label
			},
			showEvent() {
				this.show = true
			},
			confirmDelShow() {
				this.$http.post(apis.delcollection, this.delQuery).then(res => {
					if (res.data.code === 200) {
						this.tableData = []
						this.listQuery.pageNo = 1
						this.getList()
						
					}
				})
			},
			delShow(item) {
				this.delQuery.clipId = this.listQuery.clipId
				this.delQuery.artId = item.artId
				this.delQuery.contextId = item.id
				this.delshow = true
			},
			
		},
		onReachBottom() {
			this.listQuery.pageNo += 1
			this.getList()
		},
	}
</script>

<style lang="scss" scoped>

@import "uview-ui/index.scss";
	.overTextMultiple{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
.wrapper {
	padding: 24rpx 30rpx;
	.header{
		font-size: 16px;
		color: #4D5B80;
	}
	.sel-icon{
		width: 12rpx;
		height: 7rpx;
		margin-left: 10rpx;
	}
	.content{
		margin-top: 20rpx;
		.list-item{
			border-bottom: 1px solid #BFBFBF;
			padding-bottom: 30rpx;
			padding-top: 20rpx;
			.dic-all{
				span {
					padding: 0 10rpx;
					border: 1px solid #21D2FF;
					opacity: 1;
					border-radius: 4px;
					color: #21D2FF;
					font-size: 8rpx;
					text-align: center;
					margin: 0 10rpx;
				}
			}
			.title{
				font-size: $artical-title-font;
				color: $text-color;
			}
			.con{
				font-size: $artical-time-font;
				color: $econdary-word-color;
				margin: 20rpx 0;
				.con-item-left{
					width: 50%;
					flex-grow: 1;
				}
				.left{
					width: 100%;
					flex-shrink: 0;
					overflow: hidden;
				font-size: $artical-text-font;
					.img-item{
						width: 120px;
						height: 90px;
						background: rgba(0, 0, 0, 0);
						opacity: 0.8;
						border-radius: 4px;
						flex-shrink: 0;
						margin-right: 20rpx;
					}
				}
				.right{
					.des{
						margin-bottom: 10px;
						box-sizing: border-box;
					}
				}
				.edit-icon{
					width: 32.23px;
					height: 32.23px;
					margin-bottom: 10rpx;
					flex-shrink: 0;
				}
				.del-icon{
					width: 31.75px;
					height: 34px;
					flex-shrink: 0;
				}
			}
		}
	}
}
</style>
